<template>
	<view>
		<view class="muchbox flex ac">
			<image class="goldcoinsimage"
				src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FhsyZHFkfD_JG7EVqmj5hrroS01E.png">
			</image>
			<view style="flex: 1;font-size: 33rpx;font-weight: bold;margin-left:10rpx;">{{currency}}</view>
			<view class="numimage" style="margin-right: 30rpx;">
				<image style="width: 40rpx;height: 40rpx;" src="../../static/explain.png"></image>
				<view class="numimage-text">说明</view>
			</view>
			<view class="numimage">
				<image style="width: 40rpx;height: 40rpx;" src="../../static/detail.png"></image>
				<view class="numimage-text">明细</view>
			</view>
		</view>
		<view class="notes">注：若您未满18岁，请在监护人陪同下操作，未成人禁止充值！</view>

		<!-- 每日限时特惠 -->
		<view class="limited">
			<view class="limited-title flex ac">
				<image style="width: 40rpx;height: 40rpx;" src="../../static/time.png"></image>
				<view style="font-size: 30rpx;color: #ffffff;flex: 1;margin-left: 10rpx;">每日限时特惠</view>
				<view style="font-size: 30rpx;color: #ffffff;">00:07:53</view>
			</view>
			<view class="limitedview">
				<view class="limiteditem">
					<view class="limiteditem-view">
						<view class="limiteditem-background">
							<image mode="widthFix" src="../../static/goldcoins.png"></image>
						</view>
						<view class="limitedat">每日限购1次</view>
						<view class="fracture">5折</view>
						<view class="currency">198币</view>
					</view>
					<view class="limiteditem-pric">￥9.9</view>
				</view>
				<view class="limiteditem">
					<view class="limiteditem-view">
						<view class="limiteditem-background">
							<image mode="widthFix" src="../../static/goldcoins.png"></image>
						</view>
						<view class="limitedat">每日限购1次</view>
						<view class="fracture">5折</view>
						<view class="currency">760币</view>
					</view>
					<view class="limiteditem-pric">￥38</view>
				</view>
				<view class="limiteditem">
					<view class="limiteditem-view">
						<view class="limiteditem-background">
							<image mode="widthFix" src="../../static/goldcoins.png"></image>
						</view>
						<view class="limitedat">每日限购2次</view>
						<view class="fracture">4.4折</view>
						<view class="currency">2000币</view>
					</view>
					<view class="limiteditem-pric">￥88</view>
				</view>
				<view class="limiteditem">
					<view class="limiteditem-view">
						<view class="limiteditem-background">
							<image mode="widthFix" src="../../static/goldcoins.png"></image>
						</view>
						<view class="limitedat">每日限购1次</view>
						<view class="fracture">4.4折</view>
						<view class="currency">4500币</view>
					</view>
					<view class="limiteditem-pric">￥198</view>
				</view>
			</view>
		</view>

		<!-- 周卡月卡 -->
		<view class="cardbox">
			<view v-for="(item,index) in paylist" :key="index"
				:class="item.name=='月卡'?'cardlist_bg1 cardlist':'cardlist_bg2 cardlist'">
				<view class="cardview">
					<view :class="item.name=='月卡'?'beij_bg1 beij':'beij_bg2 beij'">
						激活10次必送<text style="color:#ffe42c;">25%</text>
					</view>
					<image style="width: 200rpx;" mode="widthFix"
						:src="item.name=='月卡'?'../../static/index2.png':'../../static/index1.png'"></image>
					<view style="font-size: 25rpx;color: #ffffff;">
						<text>立即获得</text>
						<text style="color:#ffe42c;" @click="">{{item.give}}</text>
						<text>币</text>
					</view>
					<view style="font-size: 25rpx;color: #ffffff;">
						<text>每日可再领取</text>
						<text style="color:#ffe42c;">{{item.every_currency}}</text>
						<text>币</text>
					</view>
				</view>
				<view class="cardbuttom" @click="opendata(item,1)">￥{{item.price}}</view>
			</view>

			<!--<view class="cardlist">
				<view class="cardview">
					<view class="beij"
						style="background-image: url(https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/wawa/fixedimage1.png);">
						激活10次必送<text style="color:#ffe42c;">15%</text>
					</view>
					<image style="width: 200rpx;" mode="widthFix" src="../../static/index1.png"></image>
					<view style="font-size: 25rpx;color: #ffffff;">
						<text>立即获得</text>
						<text style="color:#ffe42c;">355</text>
						<text>币</text>
					</view>
					<view style="font-size: 25rpx;color: #ffffff;">
						<text>每日可再领取</text>
						<text style="color:#ffe42c;">35</text>
						<text>币</text>
					</view>
				</view>
				<view class="cardbuttom">￥36</view>
			</view> -->

		</view>

		<!-- 限时 -->
		<view class="xianshibox">
			<view @click="opendata(item,2)" v-for="(item,index) in oncelist" :key="index"
				class="xianshilist xianshilist1">
				<view class="xianshimag">{{item.discount}}折</view>
				<view class="xianshitext">每日限购1次</view>
				<view class="xianshiprice">￥{{item.price}}</view>
				<view class="xianshiview">
					<view style="font-size: 30rpx;">{{item.total_currency}}币</view>
					<image style="width: 60rpx;height: 60rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
				</view>
			</view>
			<!-- 			<view class="xianshilist xianshilist1">
				<view class="xianshimag">5折</view>
				<view class="xianshitext">每日限购1次</view>
				<view class="xianshiprice">￥38</view>
				<view class="xianshiview">
					<view style="font-size: 30rpx;">760币</view>
					<image style="width: 60rpx;height: 60rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
				</view>
			</view>
			<view class="xianshilist xianshilist1">
				<view class="xianshimag">4.4折</view>
				<view class="xianshitext">每日限购2次</view>
				<view class="xianshiprice">￥99</view>
				<view class="xianshiview">
					<view style="font-size: 30rpx;">2000币</view>
					<image style="width: 60rpx;height: 60rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
				</view>
			</view>
			<view class="xianshilist xianshilist1">
				<view class="xianshimag">4.4折</view>
				<view class="xianshitext">每日限购1次</view>
				<view class="xianshiprice">￥198</view>
				<view class="xianshiview">
					<view style="font-size: 30rpx;">4500币</view>
					<image style="width: 60rpx;height: 60rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
				</view>
			</view>
			<view class="xianshilist xianshilist2">
				<view class="xianshimag">新人特惠</view>
				<view class="xianshitexta">
					<view>权限</view>
					<view>0/1次</view>
				</view>
				<view class="xianshiprice">￥0.9</view>
				<view class="xianshiview">
					<view style="font-size: 30rpx;">28币</view>
					<image style="width: 70rpx;height: 65rpx;"
						src="https://h5.bjchangyukeji.cn/img/zww_pic_lb.9efa9900.png"></image>
				</view>
			</view>
			<view class="xianshilist xianshilist2">
				<view class="xianshimag">新人特惠</view>
				<view class="xianshitexta">
					<view>权限</view>
					<view>0/2次</view>
				</view>
				<view class="xianshiprice">￥6</view>
				<view class="xianshiview">
					<view style="font-size: 30rpx;">88币</view>
					<image style="width: 70rpx;height: 65rpx;"
						src="https://h5.bjchangyukeji.cn/img/zww_pic_lb.9efa9900.png"></image>
				</view>
			</view>
			<view class="xianshilist xianshilist2">
				<view class="xianshimag">新人特惠</view>
				<view class="xianshitexta">
					<view>权限</view>
					<view>0/3次</view>
				</view>
				<view class="xianshiprice">￥68</view>
				<view class="xianshiview">
					<view style="font-size: 30rpx;">818币</view>
					<image style="width: 70rpx;height: 65rpx;"
						src="https://h5.bjchangyukeji.cn/img/zww_pic_lb.9efa9900.png"></image>
				</view>
			</view>
			<view class="xianshilist" style="border: 1px solid #d1d1d1;">
				<view class="xianshiviewa">
					<view style="font-size: 30rpx;">3500币</view>
					<image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view class="universal">普298</view>
					<view class="univerbuttom">￥298</view>
				</view>
			</view>
			<view class="xianshilist" style="border: 1px solid #d1d1d1;">
				<view class="xianshiviewa">
					<view style="font-size: 30rpx;">2300币</view>
					<image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view class="universal">普198</view>
					<view class="univerbuttom">￥198</view>
				</view>
			</view>
			<view class="xianshilist" style="border: 1px solid #d1d1d1;">
				<view class="xianshiviewa">
					<view style="font-size: 30rpx;">1120币</view>
					<image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view class="universal">普98</view>
					<view class="univerbuttom">￥98</view>
				</view>
			</view>
			<view class="xianshilist" style="border: 1px solid #d1d1d1;">
				<view class="xianshiviewa">
					<view style="font-size: 30rpx;">648币</view>
					<image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view class="universal">普58</view>
					<view class="univerbuttom">￥58</view>
				</view>
			</view>
			<view class="xianshilist" style="border: 1px solid #d1d1d1;">
				<view class="xianshiviewa">
					<view style="font-size: 30rpx;">218币</view>
					<image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view class="universal">普20</view>
					<view class="univerbuttom">￥20</view>
				</view>
			</view>
			<view class="xianshilist" style="border: 1px solid #d1d1d1;">
				<view class="xianshiviewa">
					<view style="font-size: 30rpx;">100币</view>
					<image style="width: 60rpx;height: 60rpx;margin-top: 10rpx;"
						src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view class="universal">普10</view>
					<view class="univerbuttom">￥10</view>
				</view>
			</view> -->
		</view>

		<view style="width: 100%;height: 30rpx;"></view>

		<!-- 弹窗样式 -->
		<u-popup v-model="showdata" mode="bottom" border-radius="20">
			<view class="popup-box">
				<view class="popup-title">充值金额
					<view @click="closedata" class="closebox">
						<u-icon name="close" color="#b1b1b1"></u-icon>
					</view>
				</view>
				<view class="popup-pirce">
					<view style="font-size: 60rpx;font-weight: bold;color:#303030;">￥{{pricevalue}} </view>
					<view style="color:#303030;margin-top: 15rpx;font-size: 31rpx;margin-left: 20rpx;">
						({{jingbivalue}}币)</view>
				</view>
				<view style="width: 100%;height: 20rpx;"></view>
				<view class="popup-suanze">
					<view class="popup-list flex ac border-top" @click="selectiondata(1)">
						<view class="popup-image">
							<image src="../../static/icon/aa/payment.png"></image>
						</view>
						<view class="popup-text">支付宝
							<span
								style="padding:2rpx 6rpx;background-color:#FF7028;color: #ffffff;border-radius: 10rpx;margin-left: 10rpx;">推荐</span>
						</view>
						<view class="popup-selection">
							<image v-if="typevalue==1" src="../../static/icon/aa/selection-icon.png"></image>
							<image v-if="typevalue==2" src="../../static/icon/aa/selection.png"></image>
						</view>
					</view>
					<view class="popup-list flex ac border-top border-bottom" @click="selectiondata(2)">
						<view class="popup-image">
							<image src="../../static/icon/aa/wechat.png"></image>
						</view>
						<view class="popup-text">微信支付 </view>
						<view class="popup-selection">
							<image v-if="typevalue==2" src="../../static/icon/aa/selection-icon.png"></image>
							<image v-if="typevalue==1" src="../../static/icon/aa/selection.png"></image>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 79rpx;"></view>
				<view class="buttombox" @click="recharge">确定支付</view>
				<view style="width: 100%;height: 79rpx;"></view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				paylist: [],
				oncelist: [],
				currency: 0, //金币
				showdata: false,
				typevalue: 1,
				pricevalue: 0,
				jingbivalue: 0,
				idvalue: '',
			}
		},

		onLoad() {
			this.userinfodata() //总金币数量
			this.paydata() //月卡周卡充值数据
			this.oncedata() //一次充值数据
		},

		methods: {
			//充值
			async recharge(e) {
				//1是支付宝支付 2是微信支付
				if (this.typevalue == 1) {
					let apply = await request(`${getApp().globalData.http}pay/alipayH5`, {
						'X-Requested-With': 'XMLHttpRequest',
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
					}, "POST", {
						token: getApp().globalData.token,
						cls: 1,
						shop_id: this.idvalue,
					})
					if (apply.data.code == 0) {
						window.location.href = apply.data.url
					} else {
						uni.showToast({
							title: `${apply.data.message}`,
							icon: "none",
						})
					}
				} else {
					let apply = await request(`${getApp().globalData.http}pay/public_jsapi`, {
						'X-Requested-With': 'XMLHttpRequest',
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
					}, "POST", {
						token: getApp().globalData.token,
						cls: 1,
						shop_id: this.idvalue,
					})
					if (apply.data.code == 0) {
						let payment = apply.data.data
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								appId: payment.appId,
								timeStamp: payment.timeStamp,
								nonceStr: payment.nonceStr,
								package: payment.package,
								signType: payment.signType,
								paySign: payment.paySign,
							},
							function(res) {
								if (res.err_msg === 'get_brand_wcpay_request:ok') {
									uni.showToast({
										title: '支付成功',
										icon: "none",
									})
									console.log('支付成功回调')
								} else {
									uni.showToast({
										title: '支付失败',
										icon: "none",
									})
									console.log('支付失败')
								}
							}
						)
					} else {
						uni.showToast({
							title: `${apply.data.message}`,
							icon: "none",
						})
					}
				}
			},

			//选择支付方式
			selectiondata(e) {
				this.typevalue = e
			},

			//打开弹窗
			opendata(e, index) {
				console.log(e, ">>>>>>>>>")
				this.pricevalue = e.price //传递金额
				this.idvalue = e.id
				if (index == 1) {
					this.jingbivalue = e.give
				} else {
					this.jingbivalue = e.total_currency
				}
				this.showdata = true
			},

			//关闭弹窗
			closedata(e) {
				this.showdata = false
			},

			//总金币数量
			async userinfodata(e) {
				let apply = await request(`${getApp().globalData.http}user/get_user_info`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token
				})
				if (apply.data.code == 0) {
					this.currency = apply.data.data.currency
				} else {
					getApp().globalData.token = '' //保存token
					uni.setStorageSync('token', getApp().globalData.token)
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			//一次充值数据
			async oncedata(e) {
				let apply = await request(`${getApp().globalData.http}pay_list`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					pay_type: 2,
				})
				if (apply.data.code == 0) {
					this.oncelist = apply.data.data
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			//月卡周卡数据
			async paydata(e) {
				let apply = await request(`${getApp().globalData.http}pay_list`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					pay_type: 1,
				})
				if (apply.data.code == 0) {
					this.paylist = apply.data.data
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.muchbox {
		padding: 20rpx;
	}

	.goldcoinsimage {
		width: 80rpx;
		height: 80rpx;
	}

	.numimage {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.numimage-text {
		font-size: 28rpx;
	}

	.notes {
		font-size: 23rpx;
		color: #CB6A4A;
		margin-left: 20rpx;
	}

	// 每日限时特惠
	.limited {
		margin: 20rpx;
		background-color: #F97640;
		border-radius: 30rpx;
		padding: 20rpx;
	}

	.limited-title {
		margin-bottom: 15rpx;
	}

	.limitedview {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.limiteditem {
		width: 330rpx;
		border-radius: 20rpx;
		margin-top: 10rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.limiteditem-view {
		width: 100%;
		height: 200rpx;
		background-color: #FFFBCC;
		position: relative;
	}

	.limitedat {
		width: 170rpx;
		height: 45rpx;
		background-color: #7D34FD;
		position: absolute;
		color: #ffffff;
		right: 0;
		bottom: -10rpx;
		border-radius: 20rpx 0 0 0;
		font-size: 26rpx;
		text-align: center;
		line-height: 45rpx;
	}

	.fracture {
		width: 120rpx;
		height: 50rpx;
		color: #ffffff;
		background-color: #6D21FD;
		border-radius: 0 0 25rpx 0;
		text-align: center;
		line-height: 50rpx;
		font-size: 28rpx;
	}

	.currency {
		font-size: 39rpx;
		color: #9E1A16;
		margin-top: 38rpx;
		margin-left: 20rpx;
	}

	.limiteditem-background image {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		width: 130rpx;
	}

	.limiteditem-pric {
		width: 100%;
		height: 60rpx;
		background-color: #FBEB5A;
	}

	.limiteditem-pric {
		font-size: 33rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	//周卡和月卡
	.cardbox {
		margin: 0 20rpx;
	}

	.cardlist {
		width: 100%;
		height: 160rpx;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: flex;
		align-items: center;
		position: relative;
	}

	.cardlist_bg1 {
		background-image: url(https://h5.bjchangyukeji.cn/img/yk_bg.559ec05d.png);
	}

	.cardlist_bg2 {
		background-image: url(https://h5.bjchangyukeji.cn/img/zk_bg.c2d3195b.png);
	}

	.beij_bg1 {
		background-image: url(https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/wawa/fixedimage2.png);
	}

	.beij_bg2 {
		background-image: url(https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/wawa/fixedimage1.png);
	}

	.cardbuttom {
		width: 130rpx;
		height: 50rpx;
		background-color: #FAE147;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #5D501B;
		margin-right: 30rpx;
		margin-top: 20rpx;
	}

	.cardview {
		margin-left: 200rpx;
		flex: 1;
	}

	.beij {
		position: absolute;
		right: 0;
		top: 15rpx;
		width: 286rpx;
		height: 35rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: flex;
		align-items: center;
		color: #ffffff;
		padding-left: 65rpx;
		font-size: 18rpx;
	}

	// 限时
	.xianshibox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-top: 20rpx;
	}

	.xianshilist {
		width: 200rpx;
		height: 230rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		margin-bottom: 15rpx;
		position: relative;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.xianshilist1 {
		background-image: url(https://h5.bjchangyukeji.cn/img/zww_cz_bg1.ddc1ff7d.png);
	}

	.xianshilist2 {
		background-image: url(https://h5.bjchangyukeji.cn/img/zww_cz_bg2.eec91a07.png);
	}

	.xianshimag {
		width: 120rpx;
		height: 43rpx;
		background-image: url('../../static/fixedimge1.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		margin-bottom: 15rpx;
		text-align: center;
		font-weight: 600;
		font-size: 23rpx;
		padding-top: 5rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.xianshitext {
		background: linear-gradient(1turn, #9649ff, #631aff);
		padding: 4rpx 12rpx;
		border-radius: 28rpx 28rpx 28rpx 0;
		position: absolute;
		bottom: 53rpx;
		right: 0;
		font-size: 20rpx;
		color: #ffffff;
	}

	.xianshitexta {
		width: 90rpx;
		height: 90rpx;
		background-image: url('../../static/fixedimge2.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: absolute;
		bottom: 50rpx;
		right: 0;
		font-size: 20rpx;
		color: #ffffff;
		z-index: 8;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.xianshiview {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 18rpx;
	}

	.xianshiviewa {
		width: 100%;
		// height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 15rpx;
	}

	.univerbuttom {
		width: 150rpx;
		height: 40rpx;
		background-color: #ffe42c;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #333333;
		border-radius: 50rpx;
		margin-top: 15rpx;
	}

	.universal {
		background-image: url('../../static/fixedimge3.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 120rpx;
		height: 30rpx;
		color: #ffffff;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: absolute;
		// left: 0;
		// top: 130rpx;
	}

	.xianshiprice {
		width: 100%;
		height: 45rpx;
		position: absolute;
		left: 0;
		bottom: 10rpx;
		text-align: center;
		font-size: 30rpx;
		color: #ffffff;
	}

	// 弹窗样式
	.popup-box {
		width: 100%;
		// height: 700rpx;
	}

	.popup-title {
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		font-weight: 800;
		position: relative;
	}

	.closebox {
		position: absolute;
		right: 25rpx;
		top: 25rpx;
	}

	.choice {
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.choice image {
		width: 40rpx;
		height: 40rpx;
	}

	.popup-pirce {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.popup-suanze {}

	.popup-list {
		padding: 30rpx 30rpx;
	}

	.border-top {
		border-top: 1px solid #eaeaea;
	}

	.border-bottom {
		border-bottom: 1px solid #eaeaea;
	}

	.popup-image {
		width: 62rpx;
		height: 62rpx;
		margin-right: 30rpx;
	}

	.popup-image image {
		width: 100%;
		height: 100%;
	}

	.popup-text {
		font-size: 30rpx;
		flex: 1;
	}

	.popup-selection {
		width: 42rpx;
		height: 42rpx;
	}

	.popup-selection image {
		width: 100%;
		height: 100%;
	}

	.buttombox {
		width: 500rpx;
		height: 90rpx;
		background-image: linear-gradient(270deg, #ff6144 15%, #ff99c9);
		color: #ffffff;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		margin: 0 auto;
	}
</style>